<template>
  <div class="films-search">
    <!--  头部搜索组件 -->
    <div class="search-header">
      <div class="search-header-1">
        <van-icon name="arrow-left" size="20" @click="$router.back()" />
      </div>
      <div class="search-header-2">
        <van-search
          shape="round"
          background="#F7F7F7"
          placeholder="请输入搜索关键词"
          v-model="textWord"
        />
      </div>
      <div class="search-header-3">
        <van-button type="primary" color="#D74A45" size="small" @click="">搜索</van-button>
      </div>
    </div>

    <!-- 搜索结果列表 -->
    <div class="dataList" v-show="displayCinemas.length > 0" :list="displayCinemas">
      <van-list :finished="false">
        <van-cell
          v-for="item in displayCinemas"
          :key="item"
          :title="item.key"
          @click="onJump(item)"
        />
      </van-list>
    </div>
    <div v-show="!(displayCinemas.length > 0)">
      <!-- 搜索历史 -->
      <rcentlySearch ref="recent" :max="18" />

      <!-- 热门搜索 -->
      <hotSearch />
    </div>
  </div>
</template>

<script lang="ts" setup>
// import searchHeader from './componter/search-header.vue'
import rcentlySearch from './componter/rcentlySearch.vue'
import hotSearch from './componter/search-hot.vue'
// import dataList from './componter/search-dataList.vue'
import router from '@/router'

const emit = defineEmits(['click'])

const recent = ref<Recent | null>(null)

// 搜索输入的关键字的跳转
function onJump(item: Recent) {
  // 1.将当前输入的商品关键字添加到最近搜索
  // @ts-ignore
  recent.value?.add({
    text: item
  })
  // 2. 页面跳转
  router.push({ name: 'detail' })
}

import { getSearchList } from '@/api'
// 输入框 的内容
const textWord = ref<string>('')
// 输入输入请求的内容
const cinemas = ref<SearchList[]>([])

// 搜索结果
const displayCinemas = computed(() => {
  if (!textWord.value) {
    return []
  }
  // @ts-ignore
  return cinemas.value[0].filter((item) => {
    return item.key.includes(textWord.value)
  })
})

// 请求获取数据
watchEffect(async () => {
  const abc = await getSearchList()
  cinemas.value = [abc]
  // console.log(cinemas.value)
  // console.log(displayCinemas)
})

defineExpose({
  displayCinemas
})

defineOptions({
  name: 'search'
})
</script>

<style scoped>
.films-search {
  overflow: hidden;
}
.search-header {
  width: 100%;
  height: 44px;
  display: flex;
  background-color: #fff;
  text-align: center;
  border-bottom: 0.5px solid #e5e5e5;
}
.search-header-1 {
  width: 40px;
  height: 100%;
  line-height: 44px;
}
.search-header-2 {
  width: 274px;
  height: 100%;
  line-height: 44px;
}
.van-search {
  padding: 0;
  height: 30px;
  margin-top: 7px;
  border-radius: 40px;
}
.search-header-3 {
  flex: 1;
}
</style>
